import React from "react";
import Header from './components/header'
import List from './components/list'
import Footer from './components/footer'

export default class App extends React.Component{
  // 状态在哪里 处理状态的方法就在哪里
  state = {
    todos :[
      {id:'001',done:'睡觉',isTrue:true},
      {id:'002',done:'吃饭',isTrue:true},
      {id:'003',done:'学习',isTrue:false}
    ]
  }
  // 新增状态
  addTodos = (todoObj)=>{
    const {todos} = this.state
    const newTodos = [todoObj,...todos]
    // 更新状态
    this.setState({todos:newTodos})
  }
  // 修改状态值
  changeTodos = (id,flag)=> {
    const {todos} = this.state 
    const newTodos = todos.map(item=>{
      if(item.id === id) return {...item,isTrue:flag}
      else return item
    })
    this.setState({todos:newTodos})
  }
  // 删除todo指定行
  delTodos = (id)=>{
    const {todos} = this.state 
    const nerTodos = todos.filter(i=>{
      return (i.id !== id) 
    })
    this.setState({todos:nerTodos})
  }
  // 全选全部动作
  changeAllTodo = (done)=>{
    const {todos} = this.state 
    const nerTodos = todos.map(i=>{
      return {...i,isTrue:done}
    })
    this.setState({todos:nerTodos})
  }
  // 删除选中动作
  delAllTodos = ()=>{
    const {todos} = this.state 
    const nerTodos = todos.filter(i=>{
      // return (i.isTrue !== true) 
      return !i.isTrue
    })
    this.setState({todos:nerTodos})
  }
  render(){
    let {todos} = this.state
    return(
      <div>
        <Header addTodos={this.addTodos}/>
        <List todos={todos} changeTodos={this.changeTodos} delTodos={this.delTodos}/>
        <Footer todos={todos} changeAllTodo={this.changeAllTodo} delAllTodos={this.delAllTodos}/>
      </div>  
    )
  }
}